<script>
export default{
  data(){
   return{
     username:localStorage.getItem("username")
   }
  },
  methods:{
    navbarShow(){
    document.querySelector('.navbarRight').style.opacity=1
    },
    navbarDisappeared(){
    document.querySelector('.navbarRight').style.opacity=0
    }

  }
}
</script>

<template>
  <div class="bg">
    <div class='container-fluid'>
      <div class="row">
        <div class="leftSize" v-on:mouseenter="navbarShow()" v-on:mouseleave="navbarDisappeared()">
          <div class="">
            <div class="black-color-left navbarLeft">
              <div class="yonghu-1">
                <!-- <hr> -->
              </div>
              <hr>
              <div class="chuizhidaohanglan">
                <!-- 垂直导航栏 -->
                <nav class="navbar">
                  <!-- Links -->
                  <ul class="navbar-nav">
                    <!-- <hr> -->
                    <li class="nav-item">
                      <a class="nav-link" href="#">
                        <i class="bi bi-upload"></i>
                      </a>
                    </li>
                    <hr>
                    <li class="nav-item">
                      <a class="nav-link" href="#">
                        <i class="bi bi-cloud-arrow-up"></i>
                      </a>
                    </li>
                    <hr>
                    <li class="nav-item">
                      <a class="nav-link" href="#">
                        <i class="bi bi-activity text-center"></i>
                      </a>
                    </li>
                    <hr>
                    <li class="nav-item">
                      <a class="nav-link" href="#">
                        <i class="bi bi-telephone text-center"></i>
                      </a>
                    </li>
                  </ul>
                </nav>
              </div>
            </div>
          </div>
          <!-- 隐藏部分分栏 -->
          <div class="">
            <div class="black-color-left navbarRight">
              <div class="yonghu-2">
                <div class="font-top">
                  <p>{{ username }}</p>
                </div>
              </div>
              <hr>
              <!-- <div class="jianxi">
              </div> -->
              <div class="chuizhidaohanglan right1">
                <!-- 垂直导航栏 -->
                <nav class="navbar">
                  <!-- Links -->
                  <ul class="navbar-nav linkUl">
                    <!-- <hr> -->
                    <li class="nav-item">
                      <p class="linlTo">
                          <RouterLink class="linkTo" :to="{name:'resumeUpload'}">
                            简历上传<br>
                          </RouterLink>
                      </p>
                    </li>
                    
                    <hr>
                    <!-- <div class="jianxi"></div> -->
                    <li class="nav-item">
                      <div class="jianxi"></div>
                          <RouterLink class="linkTo" :to="{name:'postUpLoad'}">岗位上传</RouterLink>
                          <!-- <div class="jianxi"></div> -->
                    </li>
                    <hr>
                    <li class="nav-item">
                          <RouterLink class="linkTo" :to="{name:'analysis'}">个人画像</RouterLink>
                    </li>
                    <hr>
                    <li class="nav-item">
                      <RouterLink class="linkTo" :to="{name:'Parse'}">岗位匹配</RouterLink>
                    </li>
                    <!-- <hr> -->
                  </ul>
                </nav>
              </div>
            </div>
          </div>
        </div>
        <div class="col-md-1 rightSize"></div>
        <div class="col-md-8">
          <router-view></router-view>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.jianxi{
  height: 8px;
}
.right1 li.nav-item{
  /* margin-bottom: 5px; */
  height: 60px;
}

.bg{
  background-image: url(../../assets/images/LayoutBackgroundImage.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  display: flex;
}
.black-color-left{
  height: 800px;
  border: 2px black;
  background-color: rgba(255, 255, 255, 0.5);
}
.yonghu-1{
  border: 2px rgba(255, 0, 0, 0.336);
  height: 100px;
  margin: 0;
  border-radius: 100%;
  /* background-color: red; */
  background-image: url(../../assets/images/用户头像.png);
  background-size: 100% auto
}
.yonghu-2{
  border: 2px rgba(255, 0, 0, 0.336);
  height: 100px;
  margin: 0;
}
.yonghu-1 img{
  height: 200px;
  width: 200px;
}
.row div{
  padding-left: 0;
  padding-right: 0;
}
.row hr{
  width: 100%;
  color:black
}

.row ul{
  width: 120px;
  height: 400px;
  /* background-color: rgba(240, 255, 248, 0.747); */
  margin: 0;
  padding: 0;
  /* background-color: rgba(240, 255, 248, 0.747); */

}
.row ul li{
  height: 60px;
  /* width: 104px; */
  margin: auto;
  color: #000;
  text-align: center;
}
.chuizhidaohanglan{
  /* background-color: rgba(240, 255, 248, 0.747); */
  height: 800px;
}
a{
  height: 50px;
  text-align: center;
  line-height: 60px;
}
a i{
  font-size: 40px;
  /* line-height: 60px; */
  /* height: 50px; */
  /* text-align: center; */
}
.linkTo{
  font-size: 20px;
  color: black;
  font-weight: bolder;
  text-align: center;
  font-style: normal;
  text-decoration:none;
  /* height: 40px; */
  /* margin-bottom: 10px; */
}

.leftSize{
  display: flex;
  width: 240px;
}
.font-top{
  text-align: center;
  font-size: 20px;
  color: black;
  font-weight: bolder;
  font-style: normal;
  line-height: 20px;
  /* margin-top: 20px; */
}
.font-top p{
  /* padding-top: 20px; */
  line-height: 120px;

}
button{
  /* background-color: blue; */
  margin-left: 40px;
  margin-right: 40px;
  height: 50px;
  border-radius: 10px;
}
.navbarRight{
  border-radius:0 50px 50px 0;
  transition: all 1s;
}
.rightSize{
  /* height: 1200px;
  width: 1450px; */
  /* background-color: blue;
  border: 10px solid red; */
}
</style>